/*
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-25 19:54:50
 * @LastEditors: mxy
 * @LastEditTime: 2022-11-25 20:21:45
 */
const { join } = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: join(__dirname, 'src', 'index.js'),
    output: {
        path: join(__dirname, 'dist'),
        filename: 'js/bundle.js', // 这里加入 js 文件夹。
        assetModuleFilename: 'images/[hash:8][ext]' // 配置文件（图片）的输出路径
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlPlugin({
            template: join(__dirname, 'public', 'index.html'), // public中，你的html叫什么
            filename: 'index.html' // 打包后的html叫什么（这个文件会生成到dist文件夹）
        })
    ],
    devServer: {
        // port: 9000, // 实时打包所用的端口号
        open: true // 初次打包完成后，自动打开浏览器
    },
    module: {
        rules: [
            // 处理css文件
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // 处理html中img标签引入的图片
            { test: /\.html$/, use: 'html-loader' },
            // 处理图片资源
            {
                test: /\.(jpg|png|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 12000, // 图片超过这个大小，使用原图片，否则使用base64字符串
                    }
                }
            }
        ]
    }
}